<template>
  <div>
    <div id="top"></div>
    <router-view class="view"/>
    <van-tabbar v-model="active" inactive-color="#666666" active-color="#000000" fixed placeholder>
      <van-tabbar-item replace v-for="(item, index) in tabbarList" :key="index" :to="item.path">
        <span>{{ item.title }}</span>
        <img slot="icon" slot-scope="props" :src="props.active ? item.active : item.normal" />
      </van-tabbar-item>
    </van-tabbar>
    <a href="#top">
      <div class="backTop" v-show="backTopIconShow" @click="backTop">
        <img :src="backTopIcon" alt="">
      </div>
    </a>
  </div>
</template>

<script>
export default {
  name: "tabbar",
  data() {
    return {
      backTopIcon: require('@/assets/icons/backTop.png'),
      backTopIconShow: false,
      active: 0,
      tabbarList: [
        {
          path: "/home",
          title: "首页",
          normal: require("@/assets/icons/index.png"),
          active: require("@/assets/icons/index-active.png")
        },
        {
          path: "/baike",
          title: "走进紫砂",
          normal: require("@/assets/icons/baike.png"),
          active: require("@/assets/icons/baike-active.png")
        },
        {
          path: "/mall",
          title: "商城",
          normal: require("@/assets/icons/mall.png"),
          active: require("@/assets/icons/mall-active.png")
        },
        {
          path: "/cart",
          title: "购物车",
          normal: require("@/assets/icons/cart.png"),
          active: require("@/assets/icons/cart-active.png")
        },
        {
          path: "/me",
          title: "个人中心",
          normal: require("@/assets/icons/me.png"),
          active: require("@/assets/icons/me-active.png")
        }
      ],
    };
  },
  created() {
    if(this.$route.query.tab != null){
      this.active = parseInt(this.$route.query.tab);
    }else{
      this.active = 0//默认选中tab1
    }
  },
  //监听路由变化
  watch: {
    $route(to) {
      this.activeTab(to.path);
    },
  },

  methods: {
    activeTab(path) {
      var index = this.tabbarList.map((item) => item.path).indexOf(path);
      if (index != -1) {
        this.active = index;
      }
    },
    windowScroll() {
      // 滚动条距离页面顶部的距离
      // 以下写法原生兼容
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop >= 1000){
        this.backTopIconShow = true
      }
    },
    backTop(){
      this.backTopIconShow = false;
    }
  },
  mounted() {
    window.addEventListener('scroll', this.windowScroll)
  }

};
</script>

<style scoped lang="less">
.view{
  min-height: calc(100vh - 50px);
  background-color: #993F26;
  //background-image: url("http://zhongguose.com/img/texture.png");
}
.van-tabbar-item__icon img{
  height: 25px !important;
}
.backTop{
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 60px;
  right: 10px;
}
</style>
